<template>
  <div class="charts-panel-box" >
    <div v-if=" type == 1 || type == 2 ">
      <div class="charts-tit">
        {{ ptMonth }}{{ typeTit }}用户总量: {{ count? count + '人': '暂无数据' }};
      </div>
      <div>
        <div class="chart-box">
          <div>1、外地用户{{ typeTit }}趋势分析</div>
          <div :style="`height:${ count? 150: 20 }px`">
            <ak-echart :option="chartOpt1"  :repaint="true" v-show="showBox && count" />
            <div v-show="!count" >暂无数据</div>
          </div>
        </div>
        <div class="chart-box">
          <div>2、省际用户{{ typeTit }}Top{{ provinceTopNum }}</div>
          <div :style="`height:${ count? provinceTopNum * barHeight:20 }px;`">
            <ak-echart :option="chartOpt2"  :repaint="true" v-show="showBox && count" />
            <div v-show="!count" >暂无数据</div>
          </div>
        </div>
        <div class="chart-box">
          <div>3、省内用户{{ typeTit }}Top{{ cityTopNum }}</div>
          <div :style="`height:${ count? cityTopNum * barHeight:20 }px;`">
            <ak-echart :option="chartOpt3"  :repaint="true" v-show="showBox && count" />
            <div v-show="!count" >暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="chart-box ">
        <div>1、流入区县Top{{ zoneTopNum }}</div>
        <div :style="`height:${ count? zoneTopNum * barHeight:20 }px;`">
          <ak-echart :option="chartOpt4"  :repaint="true" v-show="showBox && count" />
          <div v-show="!count" >暂无数据</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { queryUserInAndOutAnalysis } from '@/apis/gis'
import AkEchart from '@/components/gisPageComponents/echarts'

export default {
  props: {
    type: {
      type: Number
    },
    ptMonth: {}

  },
  components: {
    AkEchart
  },
  watch: {
    type() {
      this.showBox = false;
      this.getChartsData();
    },
    ptMonth() {
      this.showBox = false;
      this.getChartsData();
    }

  },
  data() {
    return {
      count: 0,
      provinceTrendList: [], //省际一年内漫入漫出趋势
      cityTrendList: [],  // 省内一年内漫入漫出趋势
      provinceDetailList: [], // 省际漫入漫出Top数据
      provinceTopNum: 10, //省际漫入漫出Top值
      cityDetailList: [], //省内漫入漫出Top数据
      cityTopNum: 3, //省内漫入漫出Top值
      zoneDetailList: [], //漫入漫出区县top数据
      zoneTopNum:5, //漫入漫出区县top值

      chartOpt1: {},
      chartOpt2: {},
      chartOpt3: {},
      chartOpt4: {},

      showBox: false,

      barHeight: 23, //柱状图高度

    }
  },
  computed: {
    // ...mapGetters(['userInfo' ]),
    ...mapState(['home']),
    userInfo() {
      return this.home.userInfoVo
    },
    typeTit() {
      let tit = '';
      switch (this.type) {
        case 1:
          tit = '漫入'
          break;
        case 2:
          tit = '漫出'
          break;
        default:
          break;
      }

      return tit;
    }
  },
  mounted() {
    // console.log(this.type);
    this.getChartsData();

  },
  methods: {
    // 获取 数据面板各个数据
    getChartsData() {
      let params = {
        cityId: this.userInfo.cityId,
        type: this.type,
        ptMonth: this.ptMonth
      }
      queryUserInAndOutAnalysis(params)
        .then( res => {
          // console.log(res);

          if(res.code == 1) {
            this.showBox = true;

            if(this.type == 1 || this.type == 2) {
              this.count = res.data.count;
              this.provinceTrendList = res.data.provinceTrendList;
              this.cityTrendList = res.data.cityTrendList;
              this.provinceDetailList = res.data.provinceDetailList;
              this.cityDetailList = res.data.cityDetailList;
            }else {
              this.zoneDetailList = res.data.zoneDetailList;
            }

            this.initChartsOption();

          }
        })
    },
    // 整理数据生成各个charts option
    initChartsOption() {
      if( this.type == 1 || this.type == 2 ) {
        this.chartOpt1 = this.getLineOpt( this.provinceTrendList, this.cityTrendList );
        this.chartOpt2 = this.getBarOpt( this.provinceDetailList, this.provinceTopNum );
        this.chartOpt3 = this.getBarOpt( this.cityDetailList, this.cityTopNum );
      }else {
        this.chartOpt4 = this.getBarOpt( this.zoneDetailList, this.zoneTopNum );
      }

      // console.log( this.chartOpt1, this.chartOpt2, this.chartOpt3 );
    },
    // 折线图的option
    getLineOpt( list1, list2 ) {
      let monthList = list1.map( item => { return item.ptMonth } );
      let dataList1 = list1.map( item => { return item.numAll } );
      let dataList2 = list2.map( item => { return item.numAll } );

      let opt = {
        color: ['#F69649','#0283E1', ],
        tooltip: {},
        legend:{
          show: true,
          top: '1%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '18%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: monthList,
          axisLabel: {
            interval: 0,
            rotate: 45,
            fontSize: 12
          },
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '省际' + this.typeTit +'趋势',
            data: dataList1,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
          },
          {
            name: '省内' + this.typeTit +'趋势',
            data: dataList2,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
          },
        ]
      }

      return opt;
    },
    // 柱状图的option
    getBarOpt( list, topNum ) {

      let name = '用户' + this.typeTit;
      // 升序排列
      let rankList = list.slice(0, topNum ).sort(function (a, b) { return a.count - b.count; });
      // rankList.length = topNum;
      let dataList = rankList.map(item => { return item.count });
      let nameList = rankList.map(item => { return item.name });

      // console.log(rankList, list);
      let opt = {
        color: [ '#0283E1' ],
        tooltip: {
          confine: true
        },
        grid: {
          left: '3%',
          right: '20%',
          bottom: '0%',
          top: '2%',
          containLabel: true
        },
        xAxis: {
          show: false,
          boundaryGap: [0, 0.2],
        },
        yAxis: {
          type: 'category',
          data: nameList,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 12,
            margin: 20,
            interval: 0,
          },
        },
        series: [
          {
            name: name + '1',
            type: 'bar',
            data: dataList,
            barGap: '-100%',
            label: {
              show: true,
              position:'right',
              distance: 35,
              //百分比显示
              formatter:(params) => {
                return rankList[params.dataIndex].ratio;
              },
              color: '#000',
              fontSize: 12
            }
          },

          {
            name: name ,
            type: 'bar',
            data: dataList,
            zLevel:1,
            label: {
              show: true,
              position:'insideLeft',
              color: '#000',
              fontSize: 12
            }
          },
        ]
      }

      return opt;
    },


  }

}
</script>

<style lang="scss" scoped>

.charts-panel-box {
  width: 300px;
  padding: 5px;
  overflow-y: auto;
  .charts-tit {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .chart-box {
    margin-bottom: 5px;
    > div:nth-child(1) {
      font-size: 12px;
      margin-bottom: 5px
    }

    > div:nth-child(2) {
      overflow: hidden;
      > div:last-child {
        height: 100%;
        display: flex;
        font-size: 12px;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

</style>
